<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>材质练习</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        var clipPlane = [
            // 延yoz平面切割
            new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, 0, -1), 0),
        ];
        var scene = null;
        var camera = null;
        var renderer = null;
        var sphere = null;
        // 初始化函数
        function init () {
            // 场景
            scene = new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);
            camera.position.z = 100;
           
            // camera.position.y = -10;
            // 渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.localClippingEnabled = true;
            document.body.appendChild(renderer.domElement);
            sphere = createSphereGeometry(10);
            scene.add(sphere);
            animate();
        }
        //    创建球体
        function createSphereGeometry(len) {
            var group = new THREE.Group();
            // 添加几何体
            for (var i = 0; i < len; i ++) {
                var sphereGeometry = new THREE.CylinderBufferGeometry( i / 2, i, 20, 32 );
                // var sphereGeometry = new THREE.SphereBufferGeometry(i , 30, 30);
                // 添加材质
                var material = new THREE.MeshBasicMaterial({
                    color: new THREE.Color().setHSL(Math.random(), 0.5, 0.5),
                    clipIntersection: true,
                    clippingPlanes : clipPlane,
                    side: THREE.DoubleSide,
                    // opacity: Math.random(),
                    // transparent: true,
                });
                // 将几何体和材质结合生成网格结构
                var sphere = new THREE.Mesh(sphereGeometry, material);
                // 将网格结构放置于场景中
                group.add(sphere);
            }
            return group;
        }
        
        // var sphereGeometry = new THREE.SphereBufferGeometry(10, 30, 30);
        
        // 动画效果
        function animate() {
            requestAnimationFrame(animate)
            // camera.position.z = camera.position.z % 100 + 50;
            // camera.position.x = camera.position.x % 
            // camera.rotation.y += 0.1;
            sphere.rotation.z += 0.1;
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            renderer.render(scene, camera);
        }
        
        init();
    </script>
</body>
</html>